<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Submission Animation Example</title>
<style>
  /* CSS styles for animation */
  .success-animation {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
    transform: translateY(20px);
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    text-align: center;
    display: none;
  }
  
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
</style>
</head>
<body>
  <div id="successMessage" class="success-animation">
    Successfully submitted!
  </div>
  
  <form id="submitForm">
    <!-- Your form elements here -->
    <button type="submit" id="submitButton">Submit</button>
  </form>
  
  <script>
    document.getElementById('submitForm').addEventListener('submit', function(event) {
      event.preventDefault(); // Prevent form submission
      
      // Show success message
      var successMessage = document.getElementById('successMessage');
      successMessage.style.display = 'block';
      
      // Hide success message after 3 seconds
      setTimeout(function() {
        successMessage.style.display = 'none';
      }, 3000);
    });
  </script>
</body>
</html>
